<script lang="ts" setup name="PlayGround">
import Message from '@/components/message/index';
// h 等价于 createVNode
// createVNode: 作用：创建虚拟DOM  (一个js对象, 可以模拟真实dom结构)
import { h, onMounted, render } from 'vue'
// 参数1：创建的虚拟DOM的节点类型  比如  div h1  a  img
// 一个HTML 标签名 一个组件 一个异步组件 一个函数式组件
// 参数2：虚拟DOM拥有的属性，是一个对象
// 参数3：虚拟DOM节点的内容 可以是字符串 也可以是数组

// <h1 title="标题" id="box" class="aa">我是标题</h1>
const vNode = h('h1', { title: '标题', id: 'box', className: 'aa' }, '我是标题')

onMounted(() => {
  // render 方法两个参数
  // 参数1：要渲染的虚拟DOM
  // 参数2：真实的DOM，，，虚拟DOM的挂载点
  render(vNode, document.querySelector('.box')!)
})
</script>

<template>
  <div class="box">
    <h1 title="标题">我是一个标题</h1>

  </div>
</template>

<style scoped lang="less">
:deep h1 {
  width: 100%;
  height: 40px;

}
</style>